<template>
	<view>
		<uNavbar title="交易市场" bgColor="#10191F" leftIconColor="#ffffff" :titleStyle="titleStyle" rightText="历史成交"
			@rightClick="right"></uNavbar>
		<view class="main">
			<view class="tit"  @click="gomypaymore" >
				我的购买
				<text  >更多</text>
			</view>
				
			<view class="wrap"  @click="gomypaymore" >
				<view class="wrapitem"   :style="item.status==1? 'opacity:0.6':'opacity:1' "  v-for="item in paylist" :key="item.id" >
					<view class="num">
						{{item.number>99?"99":item.number}}
					</view>
					<view class="imgwrap">
						<image  class="logo" :src="item.car_logo" mode=""></image>
						<image  v-if="item.level==3" class="bg" src="../../static/image/goldbg.png" mode=""></image>
						<image  v-if="item.level==2"  class="bg" src="../../static/image/yinbg.png" mode=""></image>
						<image  v-if="item.level==1" class="bg" src="../../static/image/tongbg.png" mode=""></image>
						<image  class="image"  :src="item.images" mode=""></image>
						<view class="tip" v-if="item.status==1"  @click="gopay">
							已装配
						</view>
					</view>
					
					<text  v-if="item.level==1"  class="text1" >{{item.name}}</text>
					<text  v-if="item.level==2"  class="text2" >{{item.name}}</text>
					<text  v-if="item.level==3"  class="text3" >{{item.name}}</text>
				</view>
			</view>
			<noDatas :xxxList="paylist" :type="2" :showMore="false"></noDatas>
		</view>
		<view class="main">
			<view class="tit"  @click="gomysellmore"  >
				我的挂售
				<text>更多</text>
			</view>
				
			<view class="wrap"  @click="gomysellmore">
				<view class="wrapitem"    v-for="(item,index) in selllist"  :key="index">
					<view class="num">
						{{item.number>99?"99":item.number}}
					</view>
					<view class="imgwrap">		
								<image  class="logo" :src="item.car_logo" mode=""></image>
						<image  v-if="item.level==3" class="bg" src="../../static/image/goldbg.png" mode=""></image>
						<image  v-if="item.level==2"  class="bg" src="../../static/image/yinbg.png" mode=""></image>
						<image  v-if="item.level==1" class="bg" src="../../static/image/tongbg.png" mode=""></image>
						<image  class="image"  :src="item.images" mode=""></image>
					</view>
					<text  v-if="item.level==1"  class="text1" >{{item.name}}</text>
					<text  v-if="item.level==2"  class="text2" >{{item.name}}</text>
					<text  v-if="item.level==3"  class="text3" >{{item.name}}</text>
				</view>
			</view>
			<noDatas :xxxList="selllist" :type="2" :showMore="false"></noDatas>
		</view>
		<view class="main">
			<view class="tit"  @click="godetail" >
				交易大厅
				<text>更多</text>
			</view>
				
			<view class="wrap"  @click="godetail" >
				<view class="wrapitem"    v-for="(item,index) in list" :key="index" >
					<view class="num">
						{{item.number>99?"99":item.number}}
					</view>
					<view class="imgwrap">
						<image  class="logo" :src="item.car_logo" mode=""></image>
						<image  v-if="item.level==3" class="bg" src="../../static/image/goldbg.png" mode=""></image>
						<image  v-if="item.level==2"  class="bg" src="../../static/image/yinbg.png" mode=""></image>
						<image  v-if="item.level==1" class="bg" src="../../static/image/tongbg.png" mode=""></image>
						<image  class="image"  :src="item.images" mode=""></image>
					</view>
					
					<text  v-if="item.level==1"  class="text1" >{{item.name}}</text>
					<text  v-if="item.level==2"  class="text2" >{{item.name}}</text>
					<text  v-if="item.level==3"  class="text3" >{{item.name}}</text>
				</view>
			</view>
			<noDatas :xxxList="list" :type="2" :showMore="false"></noDatas>
		</view>
		<view class="empty2">
			
		</view>
	</view>
	
</template>

<script>
	import {buyAccessoryGroup,sellAccessoryGroup,hallList,carindex} from "../../api/mycar.js"
	export default {
		data() {
			return {
				paylist:[],
				selllist:[],
				list:[],
				ids:"",
				titleStyle: {
					color: '#ffffff'
				},
			}
		},
		onShow() {
			this.getinfo()
			this.getpaylist()
			this.getselllist()
		},
		// onLoad() {
			
		// },
		methods: {
			getinfo(){
				carindex().then(res=>{
					this.ids=res.data.member_carpool.carpool_target_id
					this.getlist()
					// console.log(res,"asdasd")
				})
			},
			getlist(){
				uni.showLoading({
					title:"加载中",
					mask:true
				})
				hallList({
					page:1,
					carpool_target_id:this.ids,
					is_need:0
				}).then(res=>{
					console.log(res,"0")
					uni.hideLoading()
					if(res.code ==1){
						this.list=res.data.data.slice(0,8)
					}
				})
			},
			getselllist(){
				sellAccessoryGroup({
					page:1
				}).then(res=>{
					if(res.code ==1){
						this.selllist=res.data.data.slice(0,8)
					}
				})
			},
			getpaylist(){
				buyAccessoryGroup({
					page:1
				}).then(res=>{
					if(res.code ==1){
						this.paylist=res.data.data.slice(0,8)
					}
				})
			},
			gomysellmore(){
				if(this.selllist.length>0){
					uni.navigateTo({
						url:"/pagesMy/nationalCarPooling/mysellmore"
					})
				}
				
			},
			gomypaymore(){
				if(this.paylist.length>0){
					uni.navigateTo({
						url:"/pagesMy/nationalCarPooling/mypaymore"
					})
				}
				
			},
			godetail(){
				if(this.list.length>0){
					uni.navigateTo({
						url:"/pagesMy/nationalCarPooling/tradingMarketDetail"
					})
				}
				
			},
			right(){
				uni.navigateTo({
					url:"/pagesMy/nationalCarPooling/transactionHistory"
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.navigateTo({
						url: '/pagesMy/nationalCarPooling/myCarPooling'
					})
				}
			},
		},
	}
</script>
<style>
	page{
		background: #10191F !important;
	}
</style>
<style scoped lang="scss">
/deep/ .u-navbar__content__title{
	color: #fff !important;
}
/deep/.uicon-arrow-left{
	color: #fff !important;
}
/deep/ .u-navbar__content__right__text{
	color: #fff !important;
}
.main{
	width: 690rpx;
	min-height: 502rpx;
	box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin: 0 auto;
	margin-top: 40rpx;
	padding-bottom: 30rpx;
	.tit{
		width: 690rpx;
		padding-top: 30rpx;
		text-align: center;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		position: relative;
		>text{
			position: absolute;
			right: 40rpx;
			top: 40rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(255,255,255,0.8);
		}
	}
	
}
	.wrap{
		width: 690rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		.wrapitem{
			display: flex;
			flex-direction: column;
			margin-left: 30rpx;
			 margin-right: 12rpx;
			 margin-top: 20rpx;
			 position: relative;
			 .num{
			 					 position: absolute;
			 					 top: 4rpx;
			 					 right: 4rpx;
								 z-index: 99;
								 width: 40rpx;
								 height: 30rpx;
								 background: #000000;
								 border-radius: 8rpx 8rpx 8rpx 8rpx;
								 // opacity: 0.7;
								 font-weight: 500;
								 font-size: 26rpx;
								 color: #FFFFFF;
								 text-align: center;
								 line-height: 30rpx;
			 }
			 .imgwrap{
				 width: 128rpx;
				 height: 128rpx;
				 position: relative;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 .tip{
				 					 position: absolute;
				 					 width: 108rpx;
				 					 height: 38rpx;
				 					 box-shadow: inset 0rpx 0rpx 16rpx 0rpx #1C85DB;
				 					 border-radius: 6rpx 6rpx 6rpx 6rpx;
				 					 font-weight: 400;
				 					 font-size: 26rpx;
				 					 color: #FFFFFF;
				 					 text-align: center;
				 }
				.logo{
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					z-index: 9;
					top: 4rpx;
					left: 8rpx;
					border-top-left-radius:8rpx ;
				}
				 .bg{
				 	 width: 128rpx;
				 	 height: 128rpx;
				 	 position: absolute;
					 top: 0rpx;
				  }
				 .image{
				 	transform: translate();
				 	width: 100rpx;
				 	height: 100rpx;
				 	border-radius: 12rpx 12rpx 12rpx 12rpx;
				 }
			 }
			
			.text1{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FDBE67;
			}
			.text2{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #9FC1FF;
			}
			.text3{
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FBF73B;
			}
		}
	
		
	}

</style> 